<template>
  <view class="pageLayout">
    <!-- <view class="banner_box">
      <image
        class="bg-image"
        src="https://www.yinyaoit.com/YY/banner.png"
        mode="aspectFill"
      ></image>
    </view> -->
    <view>
      <performance></performance>
    </view>
    <view class="tips_box" @click="gotoHome">
      <view class="top">
        <u-icon name="error-circle-fill" color="#a22c26" size="24"></u-icon>
        <view class="tips_title">提醒</view>
      </view>
      <view class="bottom">
        <view class="text">今日场次即将开启预约，立即查看预约</view>
        <u-icon name="arrow-right" color="#a22c26" size="12"></u-icon>
      </view>
    </view>
    <view class="scroll_box">
      <scroll-view class="scroll-view_H" scroll-x="true">
        <view
          v-for="(item, index) in menuList"
          :key="index"
          class="item"
          :style="'background-color:' + item.color"
          @click="gotopage(item)"
        >
          <u-image
            width="65rpx"
            height="65rpx"
            :src="item.url"
            mode="aspectFit"
          ></u-image>
          <view class="txt">{{ item.title }}</view>
        </view>
      </scroll-view>
    </view>
    <view class="row_2" v-if="hasLogin">
      <u-row justify="space-around" gutter="20">
        <u-col span="6" @click="gotoSACustomer">
          <view class="card_two">
            <view class="left">
              <image
                src="https://www.yinyaoit.com/YY/chair_img.png"
                mode="aspectFill"
              />
            </view>
            <view class="right">
              <u-badge
                v-if="customerCount > 0"
                numberType="overflow"
                type="warning"
                max="99"
                :value="SAnum"
                :offset="[-5, 15]"
                absolute
              ></u-badge>
              <view class="card_two_title">奖励S客户</view>
              <view class="card_two_txt">Reward SA customers</view>
            </view>
          </view>
        </u-col>
        <u-col span="6" @click="gotoHome">
          <view class="card_two not_right_border">
            <view class="right">
              <template v-if="classInfo.length > 0">
                <view
                  class="card_two_info"
                  v-for="item in classInfo"
                  :key="item.classeseRecordID"
                  >您今天参与了{{ item.classeseName }}点场次</view
                >
              </template>
              <template v-else>
                <view class="card_two_info">您今天暂无场次</view>
              </template>
              <view class="card_two_txt">participate in</view>
            </view>
          </view>
        </u-col>
      </u-row>
    </view>
    <view class="fast_box">
      <view class="fast_title">快速预约 </view>
      <view class="pic">
        <image
          class="pic_banner"
          src="https://www.yinyaoit.com/YY/fast_banner.png"
          mode="aspectFill"
          @click="gotoHome"
        ></image>
        <!-- <view class="pic_text">
          <view class="pic_text_tex">已抢客资{{ 10 }}个，今日参与场次{{ 1 }}场，</view>
          <view class="pic_text_tex">剩余{{ 8 }}场，明日剩余{{ 6 }}场</view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import performance from "./performance.vue";
import {
  queryTodayCustomerClasseseRecord,
  queryCustomerResourceLinkManagerCount,
} from "@/api/welcome/index";
export default {
  components: {
    performance,
  },
  data() {
    return {
      classInfo: [],
      SAnum: 0,
      menuList: [
        {
          url: "/static/images/yueke-ico.png",
          title: "约客",
          color: "#fbe6e8",
          link: "/pages/home/index",
        },
        {
          // url: "/static/images/sofa-icon.png",
          url: "/static/images/car-ico.png",
          title: "约车",
          color: "#F0E8FF",
          link: "/pagesA/customerOut/index",
        },
        {
          url: "/static/images/jilu-ico.png",
          title: "记录",
          color: "#E6F2FF",
        },
        {
          url: "/static/images/yeji-ico.png",
          title: "业绩",
          color: "#D4F8F7",
        },
      ],
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 跳转客户
     */
    gotoSACustomer() {
      uni.navigateTo({
        url: "/pages/customer/myCustomerList?type=4",
      });
    },
    /**
     * 更新
     */
    upload() {
      if (this.hasLogin) {
        this.gerClassesInfo();
        this.getSAnum();
      }
    },
    /**
     * 查询今日客户预约记录
     */
    gerClassesInfo() {
      queryTodayCustomerClasseseRecord().then((res) => {
        // console.log(res, "queryTodayCustomerClasseseRecord");
        this.classInfo = res.data;
      });
    },
    /**
     * 奖励客资数量
     */
    getSAnum() {
      queryCustomerResourceLinkManagerCount().then((res) => {
        // console.log(res, "queryCustomerResourceLinkManagerCount");
        this.SAnum = res.data;
      });
    },
    /**
     * 跳转预约列表
     */
    gotoHome() {
      uni.navigateTo({
        url: "/pages/home/index",
      });
    },
    /**
     * 页面跳转
     */
    gotopage(val) {
      if (val.link == "") {
        return;
      }
      uni.navigateTo({
        url: val.link,
      });
    },
  },
  mounted() {
    if (this.hasLogin) {
      this.gerClassesInfo();
    }
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>

<style lang="scss" scoped>
.pageLayout {
  padding: 24rpx 40rpx;
}
.banner_box {
  position: relative;
  width: 100%;
  height: 300rpx;

  .bg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .title {
    position: relative; // 需要提升层级
    z-index: 1;
    /* 原有样式保持不变 */
  }
}
.tips_box {
  padding: 15rpx 18rpx;
  border-radius: 18rpx;
  background: #fbe6e8;
  margin-top: 40rpx;
  .top {
    display: flex;
    align-items: center;
    .tips_title {
      margin-left: 19rpx;
      color: #a22c26;
    }
  }
  .bottom {
    margin-top: 12rpx;
    display: flex;
    justify-content: space-between;
    .text {
      color: #1c1b26;
      font-size: 24rpx;
    }
  }
}
.scroll_box {
  margin-top: 40rpx;
  .scroll-view_H {
    height: 208rpx;
    white-space: nowrap;
    .item {
      display: inline-block;
      margin-right: 32rpx;
      padding: 50rpx 52rpx 35rpx;
      border-radius: 18rpx;
      .txt {
        text-align: center;
        margin-top: 21rpx;
        font-weight: 700;
        font-size: 26rpx;
      }
    }
  }
}
.fast_box {
  margin-top: 40rpx;
  .fast_title {
    font-size: 32rpx;
    font-weight: 700;
  }
  .pic {
    margin-top: 24rpx;
    position: relative;
    .pic_banner {
      width: 670rpx;
      height: 681rpx;
    }
    .pic_text {
      position: absolute;
      top: 78rpx;
      left: 35rpx;
      .pic_text_tex {
        font-size: 24rpx;
        color: #8e8d93;
      }
    }
  }
}
.row_2 {
  background-color: #ffffff;
  padding: 35rpx;
  box-sizing: border-box;
  margin-top: 40rpx;
  border-radius: 18rpx;
  width: 670rpx;
  display: flex;
  justify-content: center;

  .card_two {
    display: flex;
    align-items: center;
    border-right: 1rpx solid #e5e2e2; // 仅第一个 card_two 添加右边框

    .card_two_title {
      font-size: 24rpx;
      color: #333333;
      font-weight: bold;
    }
    .card_two_info {
      color: #333333;
      font-size: 20rpx;
      font-weight: bold;
    }
    .card_two_txt {
      color: #b8b8b8;
      font-size: 16rpx;
    }
    .left {
      image {
        width: 85rpx;
        height: 101rpx;
      }
    }
    .right {
      flex: 1;
      position: relative;
      .bad_box {
        position: relative;
        text {
          font-size: 24rpx;
          font-weight: 700;
        }
      }
    }
  }
}
.not_right_border {
  border-right: none !important;
}
</style>